@import "../_mixin";

.noshow{
	display: none;
}

#msgbox {
	width: 8rem;
	height: 6rem;
	margin-left: -4rem;
	margin-top: -6rem;
	top: 50%;
	left: 50%;
	position: fixed;
	z-index: 9999;
	clear: both;


	&.auto{
		margin-top: -1rem;
		height: auto;
	}


	.msgcontent {
		position: relative;
		width: 100%;
		display: block;
		@include font-dpr(14px);

		.obtn{
			width:40%;
			margin:auto;
			margin-top:0.25rem;
			@include font-dpr(20px)
		}

		.autobuy{
			background: white;
			padding:0.375rem 0.75rem 0.375rem 0.375rem;
			@include font-dpr(16px);
			color:#666666;
			text-align:center;
    		line-height: 0.625rem;
			b{
				@include font-dpr(20px);
				color:$mainColor;
			}

		}

		.dg{
			background:#FFffff;
			border:none;
			padding:0.5rem;
			@include font-dpr(20px);
			text-align: center;
			color: #808080;
		}
		
		.dialog{
			border:0.05rem dashed #FFffff;
			padding:0.125rem;
			
			.content{
 
				background: white;
				display: block;
				height: 100%;

				.title{
					text-align: center;
					@include font-dpr(25px);
					color:#666666;
					padding:1rem 0.0rem 0.75rem 0.0rem;
				}
				.subtitle{
					text-align: center;
					@include font-dpr(16px);
					position:relative;
					margin:0.0rem 0.25rem;

					i.left, i.right{
						position:absolute;
						height:0.05rem;
						width:35%;
						background:#eeeeee;
						top:0.25rem;
					}
					i.left{
						left:0.0rem;
					}
					i.right{
						right:0.0rem;
					}
				}
				.total{
					text-align: center;
					margin:0.5rem 0.0rem;
					color:#ff6500;
					b{
						@include font-dpr(65px);
					}
				}
				.despoit{
					@include font-dpr(17px);
					border-bottom:0.25rem solid #eeeeee;
					text-align: center;
					padding-bottom:0.5rem;
					color:#999999;
				}
				.info{
					margin-bottom:0.5rem;
					border-bottom:0.05rem solid #eeeeee;
					padding-bottom:0.25rem;
					.item{
						width: 100%;
						-webkit-box-flex: 1;
						text-align: center;
						b{
							@include font-dpr(15px);
						}
					}
				}

				.extra{
					display: -webkit-box;
					span{
						@include font-dpr(14px);
						margin:0.0rem;
    					width: 100%;
    					-webkit-box-flex: 1;
    					display: block;
    					text-align: center;
    					margin-bottom: 0.25rem;
					}
				}
			}

		}

	}


	.close {
		position: absolute;
		display: inline-block;
		width: 1.25rem;
		height: 1.25rem;
		overflow: hidden;
		right: -0.125rem;
		z-index: 99;
		top: -0.5rem;
		cursor: pointer;
		right:-0.5rem;
	}

	.close::after, .close::before {
		content: '';
		position: absolute;
		height:0.05rem;
		width: 100%;
		top: 50%;
		left: 0;
		margin-top: -1px;
		background: #ffa250;
	}

	.close::before {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.close::after {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.close.heavy::after, .close.heavy::before {
		height: 0.3rem;
		margin-top: -0.15rem;
	}

	.close.rounded::after, .close.rounded::before {
		border-radius: 0.125rem;
	}

}

#mask {
	position: fixed;
	z-index: 100;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* display: none; */
	width: 100%;
	background-color: rgba(0,0,0,.3);
	cursor: pointer
}